<template>
  <Modal title="充值审核" v-model="dialogVisible" width="50%" @opened="dialogOpen">
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" class="content-con">
      <div class="form-item">
        <Row :gutter="24">
          <Col span="12">
            <Row style="padding-top: 15px;">
              <Col span="8" class="ban-left">交易单号</Col>
              <Col span="16" class="border-box">
               {{mData.order_id}}
                </Col>
            </Row>
          </Col>
          <Col span="12">
            <Row style="padding-top: 15px;">
              <Col span="8" class="ban-left">商户ID</Col>
              <Col span="16" class="border-box">
                {{mData.uid}}
                </Col>
            </Row>
          </Col>
        </Row>
        <Row :gutter="24">
          <Col span="12">
            <Row style="padding-top: 15px;">
              <Col span="8" class="ban-left">交易金额(元)</Col>
              <Col span="16" class="border-box">
                {{mData.price}}
                </Col>
            </Row>
          </Col>
          <Col span="12">
            <Row style="padding-top: 15px;">
              <Col span="8" class="ban-left">入账金额(元)</Col>
              <Col span="16" class="border-box">
                {{mData.price | rechargeBooked(mData.poundage)}}
                </Col>
            </Row>
          </Col>
        </Row>
        <Row :gutter="24">
          <Col span="12">
            <Row style="padding-top: 15px;">
              <Col span="8" class="ban-left">手续费(元)</Col>
              <Col span="16" class="border-box">
               {{mData.poundage}}
                </Col>
            </Row>
          </Col>
          <Col span="12">
            <Row style="padding-top: 15px;">
              <Col span="8" class="ban-left">费率</Col>
              <Col span="16" class="border-box">
                {{mData.poundage | rechargeRate(mData.price)}}
                </Col>
            </Row>
          </Col>
        </Row>
        <Row :gutter="24">
          <Col span="12">
            <Row style="padding-top: 15px;">
              <Col span="8" class="ban-left">交易状态</Col>
              <Col span="16" class="border-box">
                {{mData.status | rechargeStatus(mData.status)}}
                </Col>
            </Row>
          </Col>
          <Col span="12">
            <Row style="padding-top: 15px;">
              <Col span="8" class="ban-left">支付成功时间</Col>
              <Col span="16" class="border-box">
               {{mData.pay_time}}
                </Col>
            </Row>
          </Col>
        </Row>
        <Row :gutter="24">
          <Col span="12">
            <Row style="padding-top: 15px;">
              <Col span="8" class="ban-left">创建时间</Col>
              <Col span="16" class="border-box">
                {{mData.add_time}}
                </Col>
            </Row>
          </Col>

        </Row>
        <Row :gutter="24" style="padding-top: 15px;">
          <Col span="12" v-show="payMode === 0 || payMode === 2">
            <Form-item prop="superpass">
              <Row>
                <Col span="8" class="ban-left">超级密码</Col>
                <Col span="16"><i-input v-model="formValidate.superpass" type="password" password size="large" placeholder="请输入超级密码"></i-input></Col>
              </Row>
            </Form-item>
          </Col>
          <Col span="12" v-show="payMode === 1 || payMode === 2">
            <Form-item prop="vcode">
              <Row>
                <Col span="8" class="ban-left">谷歌验证码</Col>
                <Col span="16"><i-input v-model="formValidate.vcode" size="large" placeholder="请输入谷歌验证码"></i-input></Col>
              </Row>
            </Form-item>
          </Col>
        </Row>
      </div>

    </Form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="btnCanel">取 消</el-button>
      <el-button type="warning"  :disabled="mData.status == 0 ? false : true" @click="auditOk('no')">审核不通过</el-button>
      <el-button type="primary" :disabled="mData.status == 0 ? false : true" @click="auditOk('ok')">审核通过</el-button>
    </div>
  </Modal>
</template>

<script>
import { rechargeAudit } from '@/api/merchants'
export default {
  props: {
    mData: Object,
    value: Boolean
  },
  data () {
    return {
      dialogVisible: false,
      payMode: this.$store.state.user.userInfo.pay_safemode,
      tStatus: '',
      formValidate: {
        superpass: '',
        vcode: ''
      },
      ruleValidate: {}

    }
  },
  watch: {
    value (val) {
      this.dialogVisible = val
    },
    dialogVisible (val) {
      this.$emit('input', val)
    }
  },

  mounted () {
    this.payModeinit()
  },
  methods: {
    dialogOpen () {
      this.$refs.formValidate.resetFields()
    },
    btnCanel () {
      this.close()
    },
    close () {
      this.$refs.formValidate.resetFields()
      this.$emit('submit')
      this.dialogVisible = false
    },
    payModeinit () {
      if (this.payMode === 0) {
        this.ruleValidate.superpass = {
          required: true,
          message: '请输入超级密码',
          trigger: 'blur'
        }
      }
      if (this.payMode === 1) {
        this.ruleValidate.vcode = {
          required: true,
          message: '请输入6位谷歌验证码',
          trigger: 'blur'
        }
      }
      if (this.payMode === 2) {
        this.ruleValidate.superpass = {
          required: true,
          message: '请输入超级密码',
          trigger: 'blur'
        }
        this.ruleValidate.vcode = {
          required: true,
          message: '请填写6位谷歌验证码',
          trigger: 'blur'
        }
      }
    },
    auditOk (type) {
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          let m = type === 'ok' ? '通过' : ' 不通过'
          this.$Modal.confirm({
            title: '确认信息',
            content: '确定操作审核' + m + '该笔充值申请？',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
              let data = {
                adminId: this.$store.state.user.userInfo.id,
                id: this.mData.id,
                auditType: type,
                superpass: this.formValidate.superpass,
                vcode: this.formValidate.vcode
              }
              rechargeAudit(data)
                .then(res => {
                  this.$Message.success(res.msg)
                  setTimeout(() => this.close(), 1000)
                })
                .catch(err => {
                  this.$Message.error(err.msg)
                })
            }
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }

  }
}
</script>

<style lang="less">
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal {
    top: 0;
  }
}
.border-box{
  border-left-width: 0px;
  border:1px #e2e2e2 solid;
  line-height: 35px;
  padding-left:20px;
}
</style>
